<template>
    <view class="main-pd u-p-t-20">
        <view class="u-card u-m-b-20" >
            <view class="list-item">
                <view class="u-flex u-flex-between u-flex-items-center">
                    <view class="w-220"><text class="color-f34b47">*</text>与业主关系</view>
                    <view class="u-flex w-300">
                        <u-radio-group v-model="cyObj.cyyzgx" placement="row">
                            <u-radio :customStyle="{ marginRight: '10rpx' }" v-for="(item, index) in gxList" :key="item.id"
                                :label="item.name" :name="item.name" activeColor="#f34b47">
                            </u-radio>
                        </u-radio-group>
                    </view>
                </view>
            </view>
            <view class="list-item">
                <view class="u-flex u-flex-between">
                    <view class="w-200"><text class="color-f34b47">*</text>成员姓名</view>
                    <view>
                        <u-input placeholder="请输入内容" border="none" v-model="cyObj.cyName" inputAlign="right"></u-input>
                    </view>
                </view>
            </view>
            <view class="list-item">
                <view class="u-flex u-flex-between">
                    <view class="w-200"><text class="color-f34b47">*</text>性别</view>
                    <view>
                        <u-radio-group v-model="cyObj.cySex" placement="row">
                            <u-radio :customStyle="{ marginRight: '8px' }" activeColor="#f34b47" v-for="(item, index) in sexList" :key="item.id"
                                :label="item.name" :name="item.name">
                            </u-radio>
                        </u-radio-group>
                    </view>
                </view>
            </view>
            <view class="list-item">
                <view class="u-flex u-flex-between">
                    <view class="w-200"><text class="color-f34b47">*</text>联系方式</view>
                    <view>
                        <u-input placeholder="请输入内容" border="none" v-model="cyObj.cyTel" inputAlign="right"></u-input>
                    </view>
                </view>
            </view>
        </view>
         <view class="u-m-t-30">
            <u-button
              text="保存"
              color="linear-gradient(90deg, #FA827D 0%, #F34B47 100%)"
              :customStyle="{
                  fontSize: '36rpx',
                  height: '96rpx',
              }"
              @click="saveCy"
            ></u-button>
         </view>
    </view>
</template>
<script setup>
import { ref, reactive } from "vue"
import { addcardCyApi, getcardCyApi, editcardCyApi } from "@/api/index"
import {onLoad} from "@dcloudio/uni-app"
import useInfoStore from "@/store/user";
import { checkEmpty } from "@/utils/common"
const userStore  = useInfoStore()
let gxList = ref([
    {
        id: 1,
        name: '父母'
    },
    {
        id: 2,
        name: '配偶'
    },
    {
        id: 3,
        name: '子女'
    },
    {
        id: 4,
        name: '租户'
    },
])
let sexList = ref([
    {
        id: 1,
        name: '男'
    },
    {
        id: 0,
        name: '女'
    }
])
let id = ref('')
let cyObj = ref(
    {
        cyName: '',
        cySex: '',
        cyTel: '',
        cyyzgx: '',
        dzyzkId:''
    }
)
// 添加电子成员信息
const saveCy = ()=>{
    checkEmpty(cyObj.value)
    if(!uni.$u.test.mobile(cyObj.value.cyTel)){
        uni.$u.toast("请输入正确的手机号！");
        return false;
    }
    if(id.value){
        cyObj.dzkcyId = id.value
        editcardCyApi(cyObj.value).then(res=>{
            if(res.success){
                 uni.$u.toast("修改成功！");
                 uni.navigateBack()
            }else{
                 uni.$u.toast(res.msg);
                return false;
            }
        })
    }else{
        addcardCyApi(cyObj.value).then(res=>{
            if(res.success){
                uni.$u.toast("添加成功！");
                cyObj.value.cyName = '';
                cyObj.value.cySex = '';
                cyObj.value.cyTel = '';
                cyObj.value.cyyzgx = '';
            }else{
                uni.$u.toast(res.msg);
                return false;
            }
        })
    }
    
}
const getXxInfo = (id)=>{
    getcardCyApi({ dzyzkId:id }).then(res=>{
        if(res.success){
            let data = res.data
            if(data&&data.length){
                cyObj.value = data[0]
            }
        }
    })
}
onLoad((param)=>{
    console.log('param: ', param);
    if(param.id){
        id.value = param.id
        getXxInfo(param.id)
    }
    cyObj.value.dzyzkId = param.yzkId
})
</script>
<style lang="scss">
::v-deep{
    .u-radio-group{
        justify-content: flex-end;
    }
}
</style>